<template>
  <div class="read-container">
    <div id="read"></div>
    <div
      class="ebook-reader-mask"
      @click="onMaskClick"
      @touchmove="move"
      @touchend="moveEnd"
      @mousedown.left="onMouseEnter"
      @mousemove.left="onMouseMove"
      @mouseup.left="onMouseEnd"
    ></div>
    <div class="nohave" v-if="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <transition name="top-fade" mode="out-in">
      <div class="read-top-bar" v-show="showMenu">
        <div class="left">
          <span
            class="iconfont icon-arrow-left"
            style="width: 100px"
            @click="goBack"
          ></span>
        </div>
        <div class="right">
          <span class="iconfont icon-shelf"></span>
          <span class="iconfont icon-shoppingcart"></span>
          <span class="iconfont icon-moreandroid"></span>
        </div>
      </div>
    </transition>
    <transition name="bottom-fade">
      <div class="read-bottom-bar" v-if="showMenu">
        <div class="toc">
          <span class="iconfont icon-menu" @click="hideTitleAndMenu"></span>
        </div>
        <div class="progress">
          <span class="iconfont icon-progress"></span>
        </div>
        <div class="note">
          <span class="iconfont icon-note"></span>
        </div>
        <div>
          <div>
          <div class="mode">
          <span class="iconfont icon-Daytimemode"></span>
        </div>
        </div>
        </div>
        
        
        <div class="font">
          <span class="iconfont icon-font"></span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import "jszip";
import { flatten } from "../../utils/book";
import Epub from "epubjs";
import { useRouter, useRoute } from "vue-router";
import { mapActions, useStore } from "vuex";
import {
  reactive,
  toRefs,
  onActivated,
  ref,
  computed,
  onBeforeMount,
  onMounted,
} from "vue";
export default {
  name: "read",
  setup(props) {
    let read = null;
    const action = mapActions([
      // 下面的方法用来设置上面变量的值,下面方法是异步的.then()
      "setMenuVisible",
      "setFileName",
      "setSettingVisible",
      "setDefaultFontSize",
      "setDefaultFontFamily",
      "setFontFamilyVisible",
      "setDefaultTheme",
      "setBookAvailable",
      "setProgress",
      "setSection",
      "setIsPaginating",
      "setCurrentBook",
      "setNavigation",
      "setCover",
      "setMetadata",
      "setPaginate",
      "setPagelist",
      "setOffsetY",
      "setIsBookmark",
    ]);
    const showMenu = computed(() => {
      return store.getters.menuVisible;
    });
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    let rendition = null;
    // 加载动画实现
    const loading = ref(true);
    onBeforeMount(() => {
      const read = init();
      read.setFontSize(14);
      //   read.setStyle("font-size", "1.2em");
    });
    // 蒙版的点击事件
    const prevPage = () => {
      if (rendition) {
        rendition.prev().then(() => {
          // this.refreshLocation()
        });
        hideTitleAndMenu();
      }
    };
    const nextPage = () => {
      if (rendition) {
        rendition.next().then(() => {
          // 保存阅读进度函数
          // this.refreshLocation()
        });
        hideTitleAndMenu();
      }
    };
    const toggleTitleAndMenu = () => {
      store.dispatch("book/toggleMenu");
    };

    const onMaskClick = (e) => {
      console.log("蒙版点击事件");
      // if (
      //     this.mouseState &&
      //     (this.mouseState === 2 || this.mouseState === 3)
      // ) {
      //     return
      // }
      const offsetX = e.offsetX;
      const width = window.innerWidth;
      if (offsetX > 0 && offsetX < width * 0.3) {
        console.log("上一页");
        prevPage();
      } else if (offsetX > 0 && offsetX > width * 0.7) {
        nextPage();
        console.log("下一页");
      } else {
        console.log("中间");
        toggleTitleAndMenu();
      }
    };
    // 解析电子书内容，获取封面，标题，作者等信息
    const parseBook = () => {
      // 获取cover
      read.loaded.cover.then((cover) => {
        read.archive.createUrl(cover).then((url) => {
          console.log(url, "封面");
        });
      });
      read.loaded.navigation.then((nav) => {
        // flatten--扁平化处理，三维数组变一维数组
        console.log(nav.toc, "目录章节");
        const navItem = flatten(nav.toc);
        // 判断当前目录是第几级目录
        function find(item, v = 0) {
          const parent = navItem.filter((it) => it.id === item.parent)[0];
          return !item.parent ? v : parent ? find(parent, ++v) : v;
        }
        navItem.forEach((item) => {
          item.level = find(item);
        });
        console.log(navItem, "navItem");
      });
    };

    const init = () => {
      // 定义颜色
      themeList: [
        {
          name: "默认",
          style: {
            body: {
              color: "#000",
              background: "#fff",
            },
          },
        },
      ];

      read = new Epub(eval(route.query.url));
      parseBook();
      // 通过read.renderTo生成Rendition对象
      rendition = read.renderTo("read", {
        manager: "continuous",
        snap: true,
      });

      // 通过Rendtion.display渲染电子书
      rendition.display().then(() => {
        loading.value = false;
      });

      // 向图书iframe框架中，加载字体
      //   rendition.hooks.content.register((contents) => {
      //     Promise.all([
      //       contents.addStylesheet(
      //         "https://fonts.font.im/css?family=Hanalei+Fill|Kirang+Haerang|Merriweather|MedievalSharp|Ranga"
      //       ),
      //     ]).then(() => {});
      //   });
      return {
        setFontSize: function (fontSize) {
          read.defaultFontSize = fontSize;
          //设置Theme对象
          if (read.rendition.themes) {
            read.rendition.themes.fontSize(fontSize + "px");
          }
        },
        setTheme: function (index) {
          read.rendition.themes.select(read.themeList[index].name);
          read.defaultTheme = index;
        },
      };
    };
    // 隐藏功能栏
    const hideTitleAndMenu = () => {
      store.dispatch("book/setMenuVisible", 0);
    };
    const goBack = () => {
      router.push("/home");
    };

    return {
      goBack,
      prevPage,
      nextPage,
      toggleTitleAndMenu,
      hideTitleAndMenu,
      loading,
      onMaskClick,
      showMenu,
    };
  },
};
</script>
<style scoped lang="scss">
#read {
  line-height: 1.5;
}

.ebook-reader {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.nohave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.read-top-bar {
  padding: 10px;
  width: 100%;
  position: absolute;
  height: 40px;
  background-color: #fff;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 100000;

  .left {
    width: 60%;
  }

  .right {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    span {
      padding: 0 10px;
    }
  }
}

.read-bottom-bar {
  position: absolute;
  display: flex;
  justify-content: space-around;
  height: 50px;
  background-color: #fff;
  align-items: center;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100000;

  span {
    font-size: 20px;
  }
}

.ebook-reader-mask {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 150;
  width: 100%;
  height: 100%;
}

// 动画展示
.top-fade-enter-to {
  animation: top-enter 0.6s ease forwards;
}
.top-fade-leave-to {
  animation: top-leave 0.6s ease forwards;
}
@keyframes top-enter {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
  }
}

@keyframes top-leave {
  from {
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.bottom-fade-enter-to {
  animation: bottom-enter 1s ease forwards;
}
.bottom-fade-leave-to {
  animation: bottom-leave 1s ease forwards;
}

@keyframes bottom-enter {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
  }
}
@keyframes bottom-leave {
  from {
  }
  to {
    transform: translateY(100%);
  }
}
</style>
